<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>走之毕业季</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        /* 隐藏滚动条 */
        ::-webkit-scrollbar {
            display: none;
        }
        body {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        /* Mock up 样式 */
        .mock-up {
            position: relative;
            width: 375px;
            height: 812px;
            margin: 0 auto;
            background: #ffffff;
            border-radius: 40px;
            overflow: hidden;
        }
        /* 状态栏样式 */
        .status-bar {
            height: 44px;
            background: transparent;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            color: #000;
            font-size: 14px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 50;
        }
        /* 页面标题样式 */
        .page-title {
            font-size: 24px;
            font-weight: bold;
            color: #ffffff;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            position: absolute;
            top: 44px;
            left: 20px;
            z-index: 40;
        }
        /* 搜索框样式 */
        .search-bar {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            margin-top: 120px;
        }
        /* Banner指示器样式 */
        .banner-indicator {
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(4px);
        }
        /* 底部导航栏样式 */
        .tab-bar {
            background: #ffffff;
            box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.05);
        }
        /* 顶部背景渐变 */
        .top-gradient {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 200px;
            background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
            z-index: 30;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mock-up">
        <!-- 状态栏 -->
        <div class="status-bar">
            <span>9:41</span>
            <div class="flex items-center space-x-1">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>
                </svg>
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M2 22h20V2L2 22z"/>
                </svg>
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M15.67 4H14V2h-4v2H8.33C7.6 4 7 4.6 7 5.33v15.33C7 21.4 7.6 22 8.33 22h7.33c.74 0 1.34-.6 1.34-1.33V5.33C17 4.6 16.4 4 15.67 4z"/>
                </svg>
            </div>
        </div>

        <!-- 顶部渐变背景 -->
        <div class="top-gradient"></div>
        
        <!-- 页面标题 -->
        <h1 class="page-title">走之毕业季</h1>
        
        <!-- 主要内容 -->
        <div class="h-full pb-16 overflow-auto relative">
            <!-- 搜索栏 -->
            <!-- <div class="search-bar sticky top-0 px-4 py-2 z-10">
                <div class="bg-gray-100 rounded-full px-4 py-2 flex items-center">
                    <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                    </svg>
                    <input type="text" placeholder="搜索目的地/攻略" class="ml-2 bg-transparent w-full outline-none text-sm">
                </div>
            </div> -->

            <!-- Banner轮播 -->
            <div class="relative px-4 pt-4">
                <!-- todo：：放视频放 图片 -->
                <div class="rounded-xl overflow-hidden aspect-w-16 aspect-h-9 bg-gray-200">
                    <img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470" alt="旅游风景" class="w-full h-full object-cover">
                </div>
                <!-- Banner指示器 -->
                <div class="banner-indicator absolute bottom-3 right-7 px-2 py-1 rounded-full">
                    <span class="text-white text-xs">1/4</span>
                </div>
            </div>

            <!-- 功能分类  -->
            <div class="px-4 py-6">
                <!-- todo：：区域后台自定义，后台可调整 -->
                <div class="grid grid-cols-4 gap-6">
                    <div class="text-center">
                        <div class="w-14 h-14 rounded-2xl bg-blue-100 mx-auto flex items-center justify-center mb-2">
                            <svg class="w-8 h-8 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
                            </svg>
                        </div>
                        <span class="text-sm font-medium">国内路线</span>
                    </div>
                    <div class="text-center">
                        <div class="w-14 h-14 rounded-2xl bg-green-100 mx-auto flex items-center justify-center mb-2">
                            <svg class="w-8 h-8 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                        </div>
                        <span class="text-sm font-medium">国际路线</span>
                    </div>
                    <div class="text-center">
                        <div class="w-14 h-14 rounded-2xl bg-purple-100 mx-auto flex items-center justify-center mb-2">
                            <svg class="w-8 h-8 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                        </div>
                        <span class="text-sm font-medium">定制旅行</span>
                    </div>
                    <div class="text-center">
                        <div class="w-14 h-14 rounded-2xl bg-red-100 mx-auto flex items-center justify-center mb-2">
                            <svg class="w-8 h-8 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
                            </svg>
                        </div>
                        <span class="text-sm font-medium">轻旅拍团</span>
                    </div>
                </div>
                <div class="grid grid-cols-4 gap-6">
                    <div class="text-center">
                        <div class="w-14 h-14 rounded-2xl bg-blue-100 mx-auto flex items-center justify-center mb-2">
                            <svg class="w-8 h-8 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
                            </svg>
                        </div>
                        <span class="text-sm font-medium">国内路线</span>
                    </div>
                    <div class="text-center">
                        <div class="w-14 h-14 rounded-2xl bg-green-100 mx-auto flex items-center justify-center mb-2">
                            <svg class="w-8 h-8 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                        </div>
                        <span class="text-sm font-medium">国际路线</span>
                    </div>
                    <div class="text-center">
                        <div class="w-14 h-14 rounded-2xl bg-purple-100 mx-auto flex items-center justify-center mb-2">
                            <svg class="w-8 h-8 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                        </div>
                        <span class="text-sm font-medium">定制旅行</span>
                    </div>
                    <div class="text-center">
                        <div class="w-14 h-14 rounded-2xl bg-red-100 mx-auto flex items-center justify-center mb-2">
                            <svg class="w-8 h-8 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
                            </svg>
                        </div>
                        <span class="text-sm font-medium">轻旅拍团</span>
                    </div>
                </div>
            </div>

            <!-- 全年路线计划 -->
            <!-- <div class="px-4 py-6">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-lg font-bold">全年路线计划</h2>
                    <button class="text-sm text-gray-500">点击探索</button>
                </div>
                <div class="bg-gray-50 rounded-xl p-4">
                    <div class="flex items-center justify-between">
                        <div class="flex-1">
                            <h3 class="text-base font-medium mb-1">即日起-8.31</h3>
                            <p class="text-sm text-gray-500">点击查看活动详情</p>
                        </div>
                        <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                        </svg>
                    </div>
                </div>
            </div> -->

            <!-- 攻略瀑布流 -->
            <div class="px-4 grid grid-cols-2 gap-4">
                <!-- 攻略卡片1 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm">
                    <div class="aspect-w-1 aspect-h-1 bg-gray-200">
                        <img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470" alt="攻略图片" class="w-full h-full object-cover">
                    </div>
                    <div class="p-3">
                        <div class="flex items-center space-x-1 mb-1">
                            <span class="text-xs px-2 py-0.5 bg-blue-50 text-blue-500 rounded-full">毕业季</span>
                            <span class="text-xs px-2 py-0.5 bg-purple-50 text-purple-500 rounded-full">热门</span>
                        </div>
                        <h3 class="text-sm font-medium mb-1">北京三日游完全攻略</h3>
                        <p class="text-xs text-gray-500 mb-2">景点/美食/住宿推荐</p>
                        <div class="flex items-center justify-between">
                            <span class="text-red-500 text-sm font-medium">¥299</span>
                            <span class="text-xs text-gray-400">已售 1.2k</span>
                        </div>
                    </div>
                </div>

                <!-- 攻略卡片2 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm">
                    <div class="aspect-w-1 aspect-h-1 bg-gray-200">
                        <img src="https://images.unsplash.com/photo-1495562569060-2eec283d3391" alt="攻略图片" class="w-full h-full object-cover">
                    </div>
                    <div class="p-3">
                        <div class="flex items-center space-x-1 mb-1">
                            <span class="text-xs px-2 py-0.5 bg-green-50 text-green-500 rounded-full">特惠</span>
                        </div>
                        <h3 class="text-sm font-medium mb-1">上海外滩精选路线</h3>
                        <p class="text-xs text-gray-500 mb-2">网红打卡/夜景推荐</p>
                        <div class="flex items-center justify-between">
                            <span class="text-red-500 text-sm font-medium">¥199</span>
                            <span class="text-xs text-gray-400">已售 2.5k</span>
                        </div>
                    </div>
                </div>
                        </div>
                    </div>
                </div>

                
            </div>

            <!-- 底部导航栏 -->
            <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 px-6 py-2">
                <div class="flex justify-between items-center">
                    <div class="flex flex-col items-center">
                        <svg class="w-6 h-6 text-gray-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
                        </svg>
                        <span class="text-xs mt-1 text-gray-900">路线</span>
                    </div>
                    <div class="flex flex-col items-center">
                        <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                        </svg>
                        <span class="text-xs mt-1 text-gray-400">日历</span>
                    </div>
                    <div class="flex flex-col items-center">
                        <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
                        </svg>
                        <span class="text-xs mt-1 text-gray-400">游记</span>
                    </div>
                    <div class="flex flex-col items-center">
                        <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                        </svg>
                        <span class="text-xs mt-1 text-gray-400">我的</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <div class="tab-bar fixed bottom-0 left-0 right-0 h-16 flex items-center justify-around px-6">
            <div class="text-center text-blue-500">
                <svg class="w-6 h-6 mx-auto" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
                </svg>
                <span class="text-xs mt-1 block">首页</span>
            </div>
            <div class="text-center text-gray-400">
                <svg class="w-6 h-6 mx-auto" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/>
                </svg>
                <span class="text-xs mt-1 block">分类</span>
            </div>
            <div class="text-center text-gray-400">
                <svg class="w-6 h-6 mx-auto" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
                </svg>
                <span class="text-xs mt-1 block">我的</span>
            </div>
        </div>
    </div>
</body>
</html>